<template>
  <view>
    <view class="popup">
      <up-popup
        :show="show"
        mode="bottom"
        :closeable="true"
        :safeAreaInsetBottom="false"
        @close="close"
        @open="open"
      >
        <view class="content">
          <view class="title text-xl margin-bottom-lg">请选择规格</view>
          <view class="padding-lr">
            <view class="skus">
              <view
                class="relative"
                v-for="(item, index) of $data.skuList"
                :key="index"
                @tap="onCheckSku(item)"
              >
                <view class="sku" :class="[{ 'sku--active': isActive(item) }]">
                  <view v-if="!!item.bindSku" class="group_tag">组合</view>
                  <view
                    class="sku_radio"
                    v-if="item.inputType === skuInputType.radio"
                  >
                    <view class="sku_radio__left">
                      <view class="sku_radio__left--image">
                        <image :src="item._picurl" />
                      </view>
                      <view class="right-box">
                        <view class="sku_radio__left--title">
                          {{ item.skuTitle }}
                        </view>
                        <view
                          v-if="item.skuIntro"
                          class="sku_radio__left--desc"
                        >
                          {{ item.skuIntro }}
                        </view>
                      </view>
                    </view>
                    <view class="sku_radio__right">
                      <view
                        v-if="item.price != item.marketPrice"
                        class="sku_radio__right--price"
                      >
                        <text>预估到手价</text>
                        <text class="text-price">{{ item.price }}</text>
                      </view>
                      <view class="sku_radio__right--cost">
                        <text>原价</text>
                        <text class="text-price">{{ item.marketPrice }}</text>
                      </view>
                    </view>
                  </view>
                  <view
                    class="sku_input"
                    v-if="item.inputType === skuInputType.input"
                  >
                    <view class="sku_input__left">
                      <view class="sku_input__left--image">
                        <image :src="item._picurl" />
                      </view>
                      <view class="margin-left- right-box">
                        <view class="sku_input__left--title">
                          {{ item.skuTitle }}
                        </view>
                        <view class="sku_input__left--desc">
                          <text class="text-price">{{ item.price }}</text>
                          <text>/</text>
                          <text>{{ item.skuUnit }}</text>
                        </view>
                      </view>
                    </view>
                    <view class="sku_input__right" @tap="onInputValue(item)">
                      <text class="sku_input__right--count">
                        <text v-if="item._value">
                          {{ item._value }}
                        </text>
                        <text v-else>请输入数量</text>
                      </text>
                      <text class="margin-left-sm">{{ item.skuUnit }}</text>
                    </view>
                  </view>
                </view>
              </view>
            </view>
            <view v-if="tips" class="tips">
              <up-parse :content="tips"></up-parse>
            </view>
          </view>
          <view class="confirm">
            <view class="common_btn confirm_btn" @tap="onSkuConfirm">确定</view>
          </view>
        </view>
      </up-popup>
    </view>
    <view class="input_popup">
      <up-popup
        :show="$data.inputShow"
        mode="center"
        :closeable="true"
        :safeAreaInsetBottom="false"
        @close="inputClose"
        @open="inputOpen"
      >
        <view class="input_content">
          <view class="input_title">输入框</view>
          <view class="input_box">
            <input
              v-model="$data.skuTarget._value"
              type="number"
              placeholder="请输入数值"
            />
          </view>
          <view class="btns">
            <view class="btn" @tap="inputCancel">取消</view>
            <view class="btn" @tap="inputClose">确认</view>
          </view>
        </view>
      </up-popup>
    </view>
  </view>
</template>

<script setup>
import {
  reactive,
  ref,
  nextTick,
  computed,
  onMounted,
  watch,
  watchEffect,
} from "vue";
import BasicConfig from "../../utils/config";
import errorCode from "../../utils/http/errorCode";
import { getServiceSku } from "../../api/Interface/service";
import { useGetLocationStorage } from "../../hooks/useStorage";
import { skuInputType } from "../../enums/sku";
import { jumpPage } from "../../utils/route/route";
import { eventBus } from "../../enums/eventBus";
import { useImgSrc } from "../../hooks/useImg";
import { isDev } from "../../utils/env";

const $emit = defineEmits(["update:show", "close", "choose"]);
const $props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  domesticServiceId: {
    type: [Number, String],
    default: "",
  },
  tips: {
    type: String,
    default: "",
  },
});
const $data = reactive({
  skuList: [],
  isRadio: true, // 所有sku单选
  chooseSkuIds: [], // 选择的sku集合 单选isRadio===true时,只有一个元素,为了以后多选预留的
  inputShow: false, // 输入框
  skuTarget: { _value: "", _backupValue: "" }, // 要输入的目标sku对象
});
const init = () => {
  const { code } = useGetLocationStorage();
  getServiceSku({
    cityCode: code,
    domesticServiceId: $props.domesticServiceId,
  }).then((res) => {
    if (res.code === errorCode.success) {
      $data.skuList = res.data;
      if (isDev) {
        $data.skuList.push({
          bindSku: "",
          cover:
            "/storage/manage/20241207/e3fef0b30d9af0a42fe6c952289d0b4a.png",
          domesticServiceId: 31,
          domesticServiceSkuId: 78,
          inputType: 2,
          marketPrice: "70.00",
          price: "60.00",
          serviceTime: 30,
          skuIntro: "规格1的说明哦哦哦",
          skuTitle: "擦椅子",
          skuUnit: "次",
        });
      }
      $data.skuList.forEach((item) => {
        item._picurl = useImgSrc(item.cover);
        item._value = "";
        item._backupValue = "";
      });
    }
  });
};
const onCheckSku = (e) => {
  const { domesticServiceSkuId: id } = e;
  // 单选
  if ($data.isRadio) {
    $data.chooseSkuIds = [id];
  }
  // 多选
  else {
    const index = $data.chooseSkuIds.find((skuId) => skuId === id);
    if (index < 0) $data.chooseSkuIds.push(id);
    else $data.chooseSkuIds.splice(index, 1);
  }
};
const isActive = (e) => {
  const { domesticServiceSkuId: id } = e;
  return $data.chooseSkuIds.includes(id);
};
const onSkuConfirm = () => {
  if ($data.chooseSkuIds.length === 0) {
    BasicConfig.toast("请选择规格");
    return;
  }
  let chooseSkus = [];
  for (const id of $data.chooseSkuIds) {
    const sku = $data.skuList.find((s) => s.domesticServiceSkuId == id);
    if (sku.inputType === skuInputType.input && !sku._value) {
      BasicConfig.toast("请输入sku数量");
      chooseSkus = [];
      return;
    } else {
      chooseSkus.push(sku);
    }
  }
  $emit("choose", $props.domesticServiceId, chooseSkus);
  close();
};
/** 输入数字弹窗显示 */
const onInputValue = (e) => {
  $data.inputShow = true;
  $data.skuTarget = e;
};
const close = () => {
  $emit("update:show", false);
};
const open = () => {
  init();
};
const inputCancel = () => {
  $data.skuTarget._value = $data.skuTarget._backupValue;
  inputClose();
};
const inputClose = () => {
  $data.inputShow = false;
  $data.skuTarget = { _value: "", _backupValue: "" };
};
const inputOpen = () => {
  $data.skuTarget._backupValue = $data.skuTarget._value;
};
onMounted(() => {});
</script>
<script>
// 小程序穿透
export default {
  options: { styleIsolation: "shared" },
};
</script>
<style lang="scss" scoped>
.popup {
  ::v-deep .u-popup__content {
    border-radius: 30rpx 30rpx 0 0 !important;
    max-height: 70vh;
  }
  .content {
    background: #ffffff;
    border-radius: 30rpx 30rpx 0 0;
    height: 100%;
    // padding: 30rpx;
    padding-bottom: 300rpx;
    // padding-top: 30rpx;
    overflow-y: auto;
    position: relative;
    .title {
      position: sticky;
      top: 0;
      background: #ffffff;
      z-index: 9999;
      padding: 30rpx;
    }
    .skus {
      margin-top: 30rpx;
      position: relative;
      .sku {
        padding: 30rpx;
        border-radius: 20rpx;
        background: #f7f8fa;
        margin-bottom: 30rpx;
        position: relative;
        .group_tag {
          position: absolute;
          left: 0;
          top: 0;
          color: #ffffff;
          background: #bbbbbb;
          width: max-content;
          border-radius: 20rpx 0 20rpx 0;
          padding: 6rpx 10rpx;
        }
        &--active {
          background: #e4f9f9 !important;
          border: 2rpx solid $main-color !important;
          color: $main-color !important;
          ::v-deep view {
            color: $main-color !important;
          }
          .group_tag {
            color: #ffffff !important;
            background: $main-color !important;
          }
        }
        .right-box {
          width: calc(100% - 120rpx);
          margin-left: 30rpx;
        }
        &_radio {
          display: flex;
          align-items: center;
          &__left {
            width: calc(100% - 400rpx);
            display: flex;
            align-items: center;
            &--title {
              font-size: 34rpx;
              font-weight: 700;
            }
            &--desc {
              font-size: 32rpx;
              color: #666666;
              margin-top: 20rpx;
            }
            &--image {
              width: 120rpx;
              height: 120rpx;
              image {
                width: 100%;
                height: 100%;
                border-radius: 20rpx;
              }
            }
          }
          &__right {
            width: 400rpx;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            &--price {
              color: $main-color;
              text-align: right;
              text {
                &:first-child {
                  font-size: 30rpx;
                }
                &:last-child {
                  font-size: 44rpx;
                  margin-left: 20rpx;
                }
              }
            }
            &--cost {
              font-size: 32rpx;
              color: #333333;
              text-align: right;
              margin-top: 20rpx;
              text-decoration: line-through;
              &:first-child {
                font-size: 28rpx;
              }
              &:last-child {
                margin-left: 20rpx;
              }
            }
          }
        }
        &_input {
          display: flex;
          align-items: center;
          &__left {
            display: flex;
            align-items: center;
            width: calc(100% - 300rpx);
            &--image {
              width: 120rpx;
              height: 120rpx;
              image {
                width: 100%;
                height: 100%;
                border-radius: 20rpx;
              }
            }
            &--title {
              font-size: 34rpx;
              font-weight: 700;
            }
            &--desc {
              font-size: 32rpx;
              color: #666666;
              margin-top: 20rpx;
              display: flex;
            }
          }
          &__right {
            width: 300rpx;
            // display: flex;
            // align-items: center;
            font-size: 34rpx;
            text-align: right;
            color: #333333;
            // height: 100%;
            // input {
            //   text-align: right;
            //   font-size: 40rpx;
            // }
            &--count {
              font-size: 44rpx;
            }
          }
        }
      }
    }
    .tips {
      margin: 30rpx 0;
    }
    .confirm {
      width: 100%;
      margin: 30rpx 0 0 0;
      padding: 30rpx;
      background: #ffffff;
      z-index: 9999;
      position: fixed;
      bottom: 0;
      &_btn {
        width: 100%;
      }
    }
  }
}
</style>

<style lang="scss" scoped>
.input_popup {
  ::v-deep .u-popup__content {
    border-radius: 30rpx !important;
    // padding: 30rpx;
  }
  .input_content {
    background: #ffffff;
    border-radius: 30rpx;
    height: 100%;
    padding: 30rpx;
    width: 80vw;
    .input_title {
      text-align: center;
      font-size: 40rpx;
    }
    .input_box {
      border-bottom: 1px solid #f0f0f0;
      margin: 40rpx 0;
      padding: 30rpx;
      input {
        font-size: 34rpx;
      }
    }

    .btns {
      margin-top: 60rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .btn {
        border-radius: 100rpx;
        padding: 20rpx 30rpx;
        width: 46%;
        text-align: center;
        font-size: 34rpx;
        &:first-child {
          background: #ffffff;
          border: 1px solid #cccccc;
          color: #333333;
        }
        &:last-child {
          background: $main-color;
          color: #ffffff;
        }
      }
    }
  }
}
</style>
